<template>
	<view class="login">
		<u-toast ref="uToastc" />
		<view class="header">
		</view>
		<view class="loginTop">
			<view class="title">
				<view class="titlename">你好，</view>
				<view class="titlename">欢迎使用重点目标单位督查抄告平台</view>
			</view>
		</view>
		<view class="login-box">
			<view class="login-content">
				<u-form labelPosition="left" :model="loginForm" :rules="loginRules" ref="loginRef">
					<u-form-item class="form-label" label="账号" prop="username">
						<u-input v-model="loginForm.username" placeholder="请输入账号" border="surround">
						</u-input>
					</u-form-item>
					<!-- 验证码 -->
					<u-form-item class="form-label" label="密码" prop="password">
						<u-input v-model="loginForm.password" placeholder="请输入密码" border="surround"
							placeholderClass="uview-placeholder">
						</u-input>
					</u-form-item>
				</u-form>
				<u-button class="login-btn" @click="handleLogin" color="#5094FD" type="primary" size="large"
					text="登录"></u-button>
				<view class="bottitle">没有账号？<text class="botloinf">立即登录</text></view>
			</view>
		</view>
		<view class="loginBot">登录即代表已同意<text class="botloinf">服务协议、隐私政策</text></view>
	</view>
</template>

<script setup>
	import {
		getLogin
	} from "@/api/login.js"
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import useUserStore from '@/stores/user.js'
	const userStore = useUserStore()

	// 登录表单
	const loginForm = reactive({
		username: 'admin',
		password: 'admin123',
	})
	const codeTips = ref('')
	// 登录表单引用
	const loginRef = ref(null)
	// 消息提示引用
	const uToastc = ref(null)
	// 登录校验规则
	const loginRules = reactive({
		username: [{
				type: 'string',
				required: true,
				message: '请输入账号',
				trigger: ['blur', 'change']
			},
			{

				pattern: /^[0-9a-zA-Z]*$/g,
				// 正则检验前先将值转为字符串 '只能包含字母或数字'
				transform(value) {
					return String(value);
				},
				message: '账号格式不正确',
				trigger: ['blur']
			},
		],
		password: [{
			type: 'string',
			required: true,
			message: '请输入正确密码',
			trigger: ['blur', 'change']
		}]
	})
	/**
	 * @Description: 处理登录
	 * @returns
	 */
	const handleLogin = () => {
		loginRef.value.validate().then(valid => {
			if (valid) {
				uToastc.value.show({
					title: '正在登录',
					message: "正在登录",
					type: 'loading',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
					position: 'center'
				})
				getLogin(loginForm).then((res) => {
					if (res.code == 200) {
						uToastc.value.show({
							title: '登录成功',
							type: 'success',
							message: '登录成功',
							position: 'top'
						})
						uni.setStorageSync('fankongApp_key', res.data.access_token);
						setTimeout(() => {
							userStore.setUserinfo()
							uni.redirectTo({
								url: '/pages/index/index'
							})
						}, 500)
					} else {
						uToastc.value.show({
							title: '登录失败',
							type: 'error',
							message: res.data.msg,
							position: 'top'
						})
					}

				})

			} else {}
		}).catch(() => {
			// 处理验证错误  
			// uni.$u.toast('校验失败')

		});
	}
	const token = uni.getStorageSync('fankongApp_key');
	onMounted(() => {
		if (!!token) {
			uni.redirectTo({
				url: '/pages/index/index'
			})
		}
	})
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100vh;
		// background-color: #60C2FB;
		background: url('../../static/images/loginTop1.png') no-repeat;
		background-size: 100%;

		.header {
			width: 100%;
			height: 100rpx;
		}

		.loginTop {
			width: 100%;
			height: 15%;
			display: flex;
			align-items: center;
		}

		.title {
			width: 92%;
			height: 140rpx;
			margin: auto;

			.titlename {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}

		.login-box {
			width: calc(690rpx - 70rpx);
			// width: 690rpx;
			margin: auto;
			height: 600rpx;
			padding: 0rpx 40rpx 0 40rpx;
			background-color: rgba(255, 255, 255, 0.9);
			box-shadow: 0px 0px 30px 0px rgba(70, 136, 211, 0.3);
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			.login-content {
				width: 98%;
				height: 70%;
				// border: 1px solid red;

				.bottitle {
					margin-top: 2%;
					text-align: center;
					color: #999999;

					.botloinf {
						color: #5094FD;
					}
				}

			}
		}

		.loginBot {
			width: 100%;
			height: 130rpx;
			margin: auto;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			color: #999999;

			.botloinf {
				color: #5094FD;
			}
		}
	}

	:deep(.u-form-item__body__left__content__label) {
		font-size: 25rpx;
	}

	.form-label {
		height: 130rpx;
		// border: 1px solid lightcoral;
	}

	.uview-placeholder {
		font-size: 22rpx;
	}
</style>